<script lang="ts" setup>
import { useRouter, useRoute } from 'vue-router'
import { ref, computed, inject, onMounted, onBeforeUnmount, watch } from 'vue';
import Quill from 'quill';
import { RouterLink } from 'vue-router';
import CryptoJS from 'crypto-js';
import StagingHeaser from '../components/StagingHeaser.vue';
const axios = inject('axios')
// 获取路由信息
const route = useRoute();
// 获取路由对象
const router = useRouter()
//创建剧本数据
const work = ref<any>({});
const showAlert = ref(true); // 控制警告的显示状态
// const chapterTitle = ref<string>(''); // 章节标题
//保存剧本内容变量
const quillEditor = ref<HTMLDivElement | null>(null);
let quill = ref<Quill | null>(null);
// 显示警告
const handleAlertClose = () => {
    showAlert.value = false; // 设置警告不再显示
    adjustEditorHeight(); // 调整 Quill 编辑器高度
};
// 调整 Quill 编辑器的高度
const adjustEditorHeight = () => {
    console.log("调整 Quill 编辑器的高度");
    if (quillEditor.value) {
        quillEditor.value.style.height = '600px'; // 设置新的高度
    }
};


// 定义一个函数 delay，用于返回一个 Promise
const delay = (time: number) => {
    return new Promise<void>((resolve) => {
        setTimeout(() => {
            resolve();
        }, time);
    });
};


//获取剧本信息
const getWork = async (id) => {
    const WID = id;
    console.log("获取到的剧本id：" + JSON.stringify(WID, null, 2));
    try {
        const response = await axios.get(`http://localhost:8080/api/getwork/${WID}`);
        work.value = response.data; // 假设返回的数据结构符合预期
        console.log("获取剧本信息成功：" + JSON.stringify(work.value, null, 2));
        console.log("剧本名称：" + work.value.wname)
        // 设置 Quill 编辑器的内容
        if (quill.value) {
            quill.value.root.innerHTML = work.value.wddata;
        }
    } catch (error) {
        console.error("获取剧本信息失败：" + error);
    } finally {
        Loading.value = false;
    }
}


// 页面加载时执行获取数据
onMounted(() => {
    //获取上一个页面车传过来的id：route.params.id
    getWork(route.params.id);  // 在加载组件时获取数据
    if (quillEditor.value) {
        quill.value = new Quill(quillEditor.value, {
            theme: 'snow',
            modules: {
                toolbar: [
                    [{ header: [1, 2, false] }],
                    ['bold', 'italic', 'underline', 'strike'], // 文本格式化
                    //['image', 'code-block'],
                    [{ 'align': [] }], // 文本对齐
                    ['clean'], // 移除格式按钮
                ],
            },
        });
        adjustEditorHeight; // 初始高度
    }
});


onBeforeUnmount(() => {
    quill.value = null;
});
const isDialogVisible = ref(false); // 对话框可见性
const isAuditing = ref(false);   // 是否正在审核中
const auditMessage = ref('');   // 审核消息
const isProcessing = ref(false);    // 是否正在保存中
const message = ref('');    //原因
const isSetOK = ref(0);

// 提交方法
const submit = async () => {
    //初始化数据
    isAuditing.value = false;   // 是否正在审核中
    auditMessage.value = '';   // 审核消息
    isProcessing.value = false;    // 是否正在保存中
    message.value = '';    //原因
    isSetOK.value = 0;  // 是否修改成功

    isDialogVisible.value = true



    console.log("dialogTableVisible:", isDialogVisible.value);
    if (quill.value) {
        const content = quill.value.root.innerHTML;
        const title = work.value.wname;
        const introduction = work.value.introduction;
        const WID = work.value.wid;

        const pdfRequestData = { html: content, wid: WID };
        const requestData = { wname: title, introduction, wddata: content, wid: WID };
        console.log("提交数据：");

        isAuditing.value = true;
        auditMessage.value = '';
        message.value = '';
        await delay(1000); // 等待1秒
        // await delay(1000)
        try {
            // 第一步：发送审核请求
            const auditResponse = await axios.post('http://localhost:8080/api/updateworkByReview', requestData);
            console.log("审核请求响应：", auditResponse);
            console.log("审核请求响应：", auditResponse.data);
            auditMessage.value = auditResponse.data.conclusion; // 假设审核响应直接返回审核消息
            console.log("审核消息：" + auditMessage.value);
            try {
                message.value = auditResponse.data.data[ 0].msg
                await delay(1000); // 等待1秒
                console.log("message:" + JSON.stringify(message.value, null, 2))
            } catch (error) {
                console.log("合规")
            }

            await delay(1000)
            if (auditMessage.value == "不合规") {
                await delay(1000)   // 等待2秒
                 isDialogVisible.value = false;  // 关闭对话框
            } 
            isAuditing.value = false; // 审核完成

            console.log("不合规")
            console.log("if:" + auditMessage.value)
           
            if (auditMessage.value == "合规" || auditMessage.value == "疑似") {
                isProcessing.value = true;  // 开始保存过程
                setTimeout(async () => {
                    console.log("生成pdf");

                    //await delay(1000); // 等待1秒

                    // 生成 PDF
                    try{
                        const pdfResponse = await axios.post('http://localhost:8080/api/write-pdf', pdfRequestData);
                        console.log('PDF 生成成功:', pdfResponse.data);
                    }catch (error) {
                        console.error('PDF 生成失败:', error);
                        auditMessage.value = 'PDF 生成失败，请重试。';
                        isSetOK.value = 500;
                        return;
                    }
                    

                    // 更新剧本
                    const updateResponse = await axios.post('http://localhost:8080/api/updateworkByWrite', requestData);
                    console.log('更新成功:', updateResponse.data);

                    // 保存成功
                    isSetOK.value = 1;
                    isProcessing.value = false; // 保存完成

                }, 1000); // 延时2秒后进行保存
            }

        } catch (error) {
            console.log("error:" + error)
            console.error('操作失败:', error);
            auditMessage.value = '操作失败，请重试。';
            isProcessing.value = false;
            
        }
    } else {
        console.error('Quill 编辑器没有内容。');
    }
    await delay(3000);
    isDialogVisible.value = false;
};

// 处理弹出框关闭事件
const handleDialogClose = () => {
    isDialogVisible.value = false;
    isProcessing.value = false; // 重置处理状态
    auditMessage.value = ''; // 清空消息
};
</script>

<template>
    <div class="BigBox">


        <el-header style="width: 100%;padding: 0px 0px;">
            <StagingHeaser class="header" />
        </el-header>
        <el-main class="container">
            <div class="left">
                <input v-model="work.wname" placeholder="请输入标题" class="custom-input subtitle" />
                <hr />
                <el-input v-model="work.introduction" placeholder="请输入介绍" class="left-content" type="textarea" />
            </div>
            <!-- <div class="left">
            <h2 class="subtitle">{{work.wname}}</h2>
            <el-divider>
                <el-icon><star-filled /></el-icon>
            </el-divider>
            <p class="left-content">{{work.introduction}}</p>
        </div> -->
            <div style="width: 80%;">

                <div class="editor-container">
                    <!-- <el-alert title="请注意：禁止上传任何色情、低俗、煽动等违法内容。" type="warning" show-icon class="alert" /> -->
                    <el-alert v-if="showAlert" title="请注意：禁止上传任何色情、低俗、煽动等违法内容。" type="warning" show-icon class="alert"
                        @close="handleAlertClose" />
                    <!-- <h2 class="subtitle">请输入章节号与章节名</h2>
            <el-input v-model="chapterTitle" placeholder="例：第十章 天降奇缘" class="chapter-input" /> -->

                    <div class="editor">
                        <div ref="quillEditor" class="quill-editor"></div>
                    </div>

                </div>
                <el-button type="primary" @click="submit" class="submit-button">保存文章</el-button>
            </div>


        </el-main>

        <!-- 弹出窗口 -->

    </div>
    <!-- 
    <el-button plain @click="dialogTableVisible = true">
        Open a Table nested Dialog
    </el-button> -->
    <el-dialog v-model="isDialogVisible" title="状态" @close="handleDialogClose" style="width: 360px;">
        <div>
            <div style="display: flex; justify-content: center; align-items: center;">
                <img v-if="isAuditing && message == ''" src="../img/AI.png" alt="" width="250px" height="250px">
                <!-- 审核通过正在保存 -->
                <img v-else-if="isProcessing && isSetOK != 500" src="../img/sucss.png" alt="" width="250px" height="250px" />

                <!-- 保存成功 -->
                <img v-else-if="isSetOK && isSetOK != 500" src="../img/setOK.png" alt="" width="250px" height="250px" />
                <!-- 保存失败 -->
                <img v-if="isAuditing && message != '' && isSetOK != 500" src="../img/setNO.png" alt="" width="250px" height="214px" />


                <!-- 出现错误 -->
                <img v-else-if="isSetOK == 500" src="../img/500.png" alt="" width="180px" height="250px" />

            </div>
            <p v-if="isAuditing && message == ''" style="text-align: center; margin: 0 auto; margin-top: 20px;">
                正在智能审核···</p>

            <p v-if="isAuditing && message != ''" style="text-align: center; margin: 0 auto; margin-top: 20px;">
                审核未通过,保存中断</p>


            <p v-if="isAuditing && message != ''" style="text-align: center; margin: 0 auto; margin-top: 20px;">
                原因：{{ message }}</p>


            <p v-else-if="isProcessing && isSetOK != 500" style="text-align: center; margin: 0 auto; margin-top: 20px;">审核通过，正在保存</p>

            <p v-else-if="isSetOK && isSetOK != 500" style="text-align: center; margin: 0 auto; margin-top: 20px;">保存成功！</p>

            <p v-else-if="isSetOK" style="text-align: center; margin: 0 auto; margin-top: 20px;">服务器异常！请稍后再试！</p>



        </div>
        <!-- <div v-if="isProcessing">
        <p v-if="isAuditing">正在智能审核...</p>
        <p v-if="!isAuditing">正在保存...</p>
    </div>
    <div v-else>
        <p>{{ auditMessage }}</p>
    </div> -->
    
    </el-dialog>
</template>

<style scoped>
@font-face {
    font-family: 'AlimamaDaoLiTi';
    src: url('D:\学习资料\毕业设计\项目\阿里妈妈刀隶体\AlimamaDaoLiTi.ttf') format('truetype');
}

body {
    font-family: 'AlimamaDaoLiTi', sans-serif;
}

.header {
    /* 设置透明度背景 */
    opacity: 0.9;

}

.BigBox {
    width: 100%;
    /* background-image: url('../img/writeBG.png'); */
}

.left {
    float: left;
    height: 700px;
    width: 20%;
    /* background-color: aqua; */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    /* 设置透明度 */
    opacity: 0.8;
    /* 设置元素的整体透明度 */
    background-image: url('../img/writeBG.png');
}

.container {
    display: flex;
    margin-top: 38px;
    width: 100%;
    height: 800px;
    text-align: center;

    /* 使内联元素居中 */
}

.editor {
    height: 80%;
}

.editor-container {
    height: 90%;
    width: 90%;
    margin-left: 20px;
    /* margin: 20px 20px; */
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* margin-top: 5px; */
    /* 增加边距 */
}

.alert {
    margin-bottom: 20px;
}

.subtitle {
    width: 90%;
    font-size: 20px;
    margin: 10px 0;
    color: #333;
}

.custom-input {
    text-align: center !important;
    /* 确保文本居中 */
    border: none !important;
    /* 去掉边框 */
    background-color: transparent !important;
    /* 背景透明，避免背影色带来的视觉效果 */
    border: none !important;
    /* 去掉聚焦时的边框 */
    outline: none !important;
    /* 去掉默认的轮廓 */
}

.left-content {
    margin-top: 10px;
    width: 90%;
    text-align: center !important;
    /* 确保文本居中 */
    border: none !important;
    /* 去掉边框 */
    background-color: transparent !important;
    /* 背景透明，避免背影色带来的视觉效果 */
}

.chapter-input {
    margin-bottom: 20px;
}

.quill-editor {
    height: 550px;
    /* 初始高度 */
    border: 1px solid #ddd;
    /* background-color: aqua; */
    border-radius: 4px;
    font-size: 17px;
    /* 设置字体大小为 16px，调整为你需要的大小 */
}

.submit-button {
    margin-top: 30px;
    width: 80px;
}
</style>